<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Calculator</title>
    <meta name="description" content="Simple Calculator With Dark Mode." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/css/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/css/side_bar.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/jquery.min.js"></script>
</head>
<body>

    <div class="wrapper" >
        <div class="container" >
            <div class="header_container">
                <div class="header_left">
                    <i class="fa fa-list toggle" aria-hidden="true"></i>
                    <h>日期计算</h>
                    <i class="fa fa-history" aria-hidden="true"></i>
                </div>
            </div>
            <div id="app">
                <el-row>
                    <div class="date_head">日期之间的相隔时间</div>
                </el-row>
                <el-row class="date-text">
                    <span class="demonstration">开始日期</span>
                </el-row>
                <el-row>
                    <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-row>
                <el-row class="date-text">
                    <span class="demonstration">结束日期</span>
                </el-row>
                <el-row>
                    <el-date-picker
                            v-model="value2"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </el-row>
                <el-row class="date-text">
                    <span class="demonstration date_res">差值</span>
                </el-row>
                <div class="input_container date_input_container">
                    <input  class="res_in date_input" type="text" name="result" id="result" :value=input_val1 readonly />
                    <input id="hisIn" type="text" name="history_input" class="his_in date_input" :value=input_val2 readonly/>
                </div>
            </div>

            <div class="side_bar bar_close" id="sideBar">
                <div class="bar_wrapper">
                    <header class="bar_head">计算器</header>
                    <url class="bar_url">
                        <li class="bar_nav"><a href="/standard"><i class="fa fa-chevron-right" aria-hidden="true"></i> 标准</a></li>
                        <li class="bar_nav"><a href="/"><i class="fa fa-chevron-right" aria-hidden="true"></i> 科学</a></li>
                        <li class="bar_nav nav_active"><a href="/date"><i class="fa fa-chevron-right" aria-hidden="true"></i> 日期计算</a></li>
                    </url>
                    <header class="bar_head">转换器</header>
                    <url class="bar_url">
                        <li class="bar_nav"><a href="/vol"><i class="fa fa-chevron-right" aria-hidden="true"></i> 容量</a></li>
                        <li class="bar_nav"><a href="/length"><i class="fa fa-chevron-right" aria-hidden="true"></i> 长度</a></li>
                    </url>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../static/js/stack.js"></script>
<script src="../static/js/models.js"></script>
<script src="../static/js/index.js"></script>
<script src="../static/js/calculate.js"></script>
<script src="../static/js/sideBar.js"></script>
<script>
    const date=new Vue({
        el:'#app',
        name: "app",
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: Date.now(),
                value2: Date.now(),
                input_val1:'0年,0月',
                input_val2:'0天',
            }
        },
        watch:{

            value1:{
                handler(val,oldVal){
                    this.date_cal();
                },
                immediate:true,//立即监听
                deep:true,//深度监视

            },
            value2:{
                handler(val,oldVal){
                    this.date_cal();
                },
                immediate:true,//立即监听
                deep:true,//深度监视
            }

        },
        methods:{
            getDate(val){
                let newDate = new Date(val),
                    Year = newDate.getFullYear(),
                    Month = newDate.getMonth() + 1,
                    Day = newDate.getDate()

                if (Month >= 1 && Month <= 9) {
                    Month = "0" + Month;
                }

                if (Day >= 1 && Day <= 9) {
                    Day = "0" + Day;
                }
                return {Year,Month,Day};
            },

            date_cal(){
                let date1=this.getDate(this.value1);
                let date2=this.getDate(this.value2);
                let y=Math.abs(date1.Year-date2.Year);
                let m = Math.abs(date1.Month-date2.Month )// 月份，注意：js里的月要加1
                let d = Math.abs(date1.Day-date2.Day) // 日
                this.input_val1=y+'年,'+m+'月';
                this.input_val2=d+'天';
            },
        }

    })
</script>
<style>
    .date_head{
        margin: 12px 10px 12px 10px;
    }
    .date_input_container .date_input{
        margin-bottom: 21px;
    }
</style>
</html>